<template>
	<div class="icons">
	  <swiper      :options="swiperOption" > 
	    <swiper-slide v-for="(page,index) of pages" :key="index" > 
			<div class="icon" v-for="item of page"
			:key="item.id"
			> 
			  <div  class="icon-image">
				<img  class="icon-imgcontent":src="item.imgUrl"/>
			  </div>
			<p class="icon-desc">{{item.desc}}</p>
			</div>
		</swiper-slide>
	  </swiper>	
	</div>
</template>

<script>
export default {
	name: 'HomeIcons',
	props: {
		list: Array
	},
	data () {
		return {
			swiperOption: {
			autoplay: false
				}
		}
	},
	computed: {
		pages () {
			const pages= []
			this.list.forEach((item,index) =>{
				const page=Math.floor(index/8)
				if (!pages[page]) {
					pages[page]=[]
				}
				pages[page].push(item)
			})
			return pages 
		}
	}

}	
	
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	@import '~styles/mixins.styl'
	.icons >>> .swiper-container
		height: 0
		padding-bottom: 50%
		.icons
		.icon
			position: relative
			overflow: hidden
			float: left
			width:25%
			height: 0
			padding-bottom: 25%
	
			.icon-image
				position: absolute
				top: 0
				left: 0
				right:0
				bottom: 1.1rem				
				box-sizing: boder-box
				padding: .1rem
				.icon-imgcontent
					height: 100%
					display: block
					margin: 0 auto
			.icon-desc
				position: absolute
				left: 0
				right:0
				bottom: 0
				height: 1rem
				line-height: 1rem
				text-align:center 
				color:$darkTextColor
				ellipsis ()				
</style>